<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jTip</title>
<style>
.tip_window {
	padding:5px; 
	width:200px;
	border:1px solid #fff;
	background-color:#000; 
	color:#fff; 
	text-align:center;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 4px; 
	-webkit-box-shadow: 1px 1px 3px #6e6d6e;
	-moz-box-shadow: 1px 1px 3px #6e6d6e;
	box-shadow: 1px 1px 3px #6e6d6e; 
}
/* try this for another style option
.tip_window_other {
	width:320px;
	padding:5px;
	color:#fff; 
	text-shadow:-1px -1px 0px #2e83ce;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	border:3px solid #fff;
	outline:2px solid #2e83ce;
	background: #b2e1ff; 
	background: -moz-linear-gradient(top, #b2e1ff 0%, #66b6fc 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e1ff), color-stop(100%,#66b6fc)); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 );
}
 */
a {display:block; padding:10px; float:left; margin:20px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jTip.js"></script>
<script>
$(document).ready(function(){
	$(".tip").jTip();
});
</script>
</head>

<body>
<a href="#" class="tip" title="jTip And something longer will go here">Simple Tip</a>
<a href="#" class="tip" title="Something else in here!">Simple Tip 2</a>
<a href="#" class="tip" title="This is the greatest tip plugin EVER! Seriously :)">Longer text</a>
</body>
</html>
